<template>
  <!-- 会员贡献价值分析 -->
  <div class="components-contributed-value">
    <div class="board-title">
      {{ $t('dataAnalysis.valueAnalysisOfMemberContributions') }}
    </div>

    <!-- 选项 -->
    <!-- 复选框选项组 -->
    <div class="checkbox-options-group">
      <!-- 选项 -->
      <div class="data-radio">
        <el-checkbox-group v-model="form.saleIndex">
          <!-- 浏览访问 -->
          <div class="item browse-visits">
            <span class="tit">{{ $t('dataAnalysis.basicIndicators') }}：</span>
            <div class="radio-group">
              <el-checkbox
                :label="$t('dataAnalysis.totalMembership')"
                name="saleIndex"
                checked
              >
                {{ $t('dataAnalysis.totalMembership') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.totalMembershipRatio')"
                name="saleIndex"
                checked
              >
                {{ $t('dataAnalysis.totalMembershipRatio') }}
              </el-checkbox>
            </div>
          </div>

          <!-- 引导转化 -->
          <div class="item conversions">
            <span class="tit">{{ $t('dataAnalysis.clinchADealtheIndicators') }}：</span>
            <div class="radio-group">
              <el-checkbox
                :label="$t('dataAnalysis.MemberTransactions')"
                name="saleIndex"
                checked
              >
                {{ $t('dataAnalysis.MemberTransactions') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.tradedMembersRatio')"
                name="saleIndex"
                checked
              >
                {{ $t('dataAnalysis.tradedMembersRatio') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.payOrderQuantity')"
                name="saleIndex"
                checked
              >
                {{ $t('dataAnalysis.payOrderQuantity') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.customerUnitPrice')"
                name="saleIndex"
              >
                {{ $t('dataAnalysis.customerUnitPrice') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.paymentAmount')"
                name="saleIndex"
              >
                {{ $t('dataAnalysis.paymentAmount') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.proportionOfPaymentAmount')"
                name="saleIndex"
              >
                {{ $t('dataAnalysis.proportionOfPaymentAmount') }}
              </el-checkbox>
              <el-checkbox
                :label="$t('dataAnalysis.perCapitaConsumptionFrequency')"
                name="saleIndex"
              >
                {{ $t('dataAnalysis.perCapitaConsumptionFrequency') }}
              </el-checkbox>
            </div>
          </div>
        </el-checkbox-group>

        <div class="check-list">
          <span id="maxSelectSpan">{{ $t('dataAnalysis.upTo8') }}</span>&nbsp;{{ $t('dataAnalysis.selected') }}<span class="mark">&nbsp;{{ selectNum }}&nbsp;</span>/{{ $t('dataAnalysis.eightItems') }}
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-box">
      <el-table
        :data="tableData5"
        header-cell-class-name="table-header"
        row-class-name="table-row"
      >
        <el-table-column
          highlight-current-row="true"
          fixed
          prop="custType"
          :label="$t('dataAnalysis.customerType')"
        />
        <el-table-column
          v-if="isVisible1"
          prop="totalMember"
          :label="$t('dataAnalysis.totalMembership')"
        />
        <el-table-column
          v-if="isVisible2"
          prop="totalMemberRate"
          :label="$t('dataAnalysis.totalMembershipRatio')"
        />
        <el-table-column
          v-if="isVisible3"
          prop="payMemberNum"
          :label="$t('dataAnalysis.numberOfTradedMembers')"
        />
        <el-table-column
          v-if="isVisible10"
          prop="payMemberNum"
          :label="$t('dataAnalysis.MemberTransactions')"
        />
        <el-table-column
          v-if="isVisible4"
          prop="payMemberNumRate"
          :label="$t('dataAnalysis.tradedMembersRatio')"
        />
        <el-table-column
          v-if="isVisible5"
          prop="payOrderNum"
          :label="$t('dataAnalysis.payOrderQuantity')"
        />
        <el-table-column
          v-if="isVisible6"
          prop="pricePerMember"
          :label="$t('dataAnalysis.customerUnitPrice')"
        />
        <el-table-column
          v-if="isVisible7"
          prop="payAmount"
          :label="$t('dataAnalysis.paymentAmount')"
        />
        <el-table-column
          v-if="isVisible8"
          prop="payAmountRate"
          :label="$t('dataAnalysis.proportionOfPaymentAmount')"
        />
        <el-table-column
          v-if="isVisible9"
          prop="frequencyOfConsume"
          :label="$t('dataAnalysis.perCapitaConsumptionFrequency')"
        />
      </el-table>
    </div>

    <!-- 数据分析思路 -->
    <div class="data-analysis-ideas">
      <img
        src="@/assets/icon/data-nalysis-ideas@2x.png"
        class="left-icon"
      >
      <div class="txt">
        <p>{{ $t('dataAnalysis.dataAnalysisIdeas') }}</p>
        <p>
          {{ $t('dataAnalysis.memberLevelDateText1') }} <el-link
            type="primary"
            href="javascript: void();"
          >
            {{ $t('dataAnalysis.coupon') }}
          </el-link> {{ $t('dataAnalysis.maybe') }} <el-link
            type="primary"
            href="javascript: void();"
          >
            {{ $t('dataAnalysis.memberTransactionsTask') }}
          </el-link> {{ $t('dataAnalysis.memberLevelDateText2') }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  dateType: {
    type: Number,
    default: 0
  },
  dateRange: {
    type: Array,
    default: () => ([])
  }
})

watch(() => props.dateRange, () => {
  // 会员概览后台数据
  getMemberContributeData()
})

const form = reactive({
  saleIndex: [], // 基础指标
  serviceIndex: [] // 成交指标
})

const sumData = ref([]) // 所有指标
const selectNum = ref(0) // 选择指标的数量
watch([() => form.saleIndex, () => form.serviceIndex], () => {
  selectNum.value = form.saleIndex.length + form.serviceIndex.length
  // sumData是用来存放点击选中的文本框信息
  sumData.value = []
  sumData.value = sumData.value.concat(form.saleIndex).concat(form.serviceIndex)
  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 8) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 8) {
    textShare(span, 'grey')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
}, { deep: true })
watch(() => sumData.value, () => {
  // 将存放的选择框数据调用函数来执行数据响应展示操作
  changVisibles()
})

onMounted(() => {
  changVisibles()
})

const tableData5 = ref([
  {
    custType: $t('dataAnalysis.allFreeGradeMembers')
  },
  {
    custType: $t('dataAnalysis.allPaidMembers')
  }])
const getMemberContributeData = () => {
  let startTime = ''
  let endTime = ''
  if (props.dateRange && props.dateRange.length > 0) {
    startTime = props.dateRange[0]
    endTime = props.dateRange[1]
  }
  const param = {
    dateType: props.dateType,
    startTime,
    endTime
  }
  http({
    url: http.adornUrl('/platform/flowCustomerAnalysis/getMemberVontributeValue'),
    method: 'get',
    params: http.adornParams(param)
  }).then(data => {
    data = data.data
    if (data) {
      data.publicMember.custType = tableData5.value[0].custType
      data.paidMember.custType = tableData5.value[1].custType
      tableData5.value = []
      tableData5.value.push(data.publicMember)
      tableData5.value.push(data.paidMember)
      tableData5.value.forEach(i => {
        i.payMemberNumRate = (i.payMemberNumRate * 100).toFixed(2) + '%'
        i.totalMemberRate = (i.totalMemberRate * 100).toFixed(2) + '%'
      })
    }
  })
}
/**
 * 控制表格列显隐
 */

const isVisible1 = ref(true)
const isVisible2 = ref(true)
const isVisible3 = ref(true)
const isVisible4 = ref(true)
const isVisible5 = ref(true)
const isVisible6 = ref(false)
const isVisible7 = ref(false)
const isVisible8 = ref(false)
const isVisible9 = ref(false)
const isVisible10 = ref(true)
const changVisibles = () => {
  isVisible1.value = judgeStrArrIncludeOtherString($t('dataAnalysis.totalMembership'))
  isVisible2.value = judgeStrArrIncludeOtherString($t('dataAnalysis.totalMembershipRatio'))
  isVisible3.value = judgeStrArrIncludeOtherString($t('dataAnalysis.numberOfTradedMembers'))
  isVisible4.value = judgeStrArrIncludeOtherString($t('dataAnalysis.tradedMembersRatio'))
  isVisible10.value = judgeStrArrIncludeOtherString($t('dataAnalysis.MemberTransactions'))
  isVisible5.value = judgeStrArrIncludeOtherString($t('dataAnalysis.payOrderQuantity'))
  isVisible6.value = judgeStrArrIncludeOtherString($t('dataAnalysis.customerUnitPrice'))
  isVisible7.value = judgeStrArrIncludeOtherString($t('dataAnalysis.paymentAmount'))
  isVisible8.value = judgeStrArrIncludeOtherString($t('dataAnalysis.proportionOfPaymentAmount'))
  isVisible9.value = judgeStrArrIncludeOtherString($t('dataAnalysis.perCapitaConsumptionFrequency'))
}
const judgeStrArrIncludeOtherString = (str) => {
  return sumData.value.includes(str)
}

/**
 * 文字效果
 */
const textShare = (div, color) => {
  div.style.color = color
}

</script>

<style lang="scss" scoped>
.components-contributed-value {
  .board-title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom: 15px;
  }
  // 表格
  .table-box {
    margin: 20px 0;
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .table-header {
      height: 60px;
    }
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .table-row {
      height: 56px;
    }
  }
.checkbox-options-group{
  // 选项
  .data-radio {
    display: block;
    padding: 30px 25px;
    font-size: 14px;
    background: #f7f8fa;
    .item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .tit {
        display: block;
        font-size: 14px;
        min-width: 70px;
      }
      .radio-group {
        // eslint-disable-next-line vue-scoped-css/no-unused-selector
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #333;
        }
      }
    }
    .item:first-child {
      margin-bottom: 25px;
    }
    .check-list {
      display: block;
      margin-top: 25px;
      margin-left: 70px;
      font-size: 12px;
      color: #999;
      .mark {
        color: #155bd4;
        font-weight: bold;
      }
      // eslint-disable-next-line vue-scoped-css/no-unused-selector
      .red {
        color: #FF4141;
      }
    }
  }

}
  // 数据分析思路
  .data-analysis-ideas {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f7f8fa;
    padding: 20px;
    .left-icon {
      display: block;
      width: 52px;
      height: 52px;
      margin-right: 20px;
    }
    .txt {
      font-size: 14px;
      color: #333;
      line-height: 1.5em;
      p {
        margin: 0;
      }
      p:first-child {
        font-size: 16px;
        margin-bottom: 8px;
      }
      p:last-child {
        color: #666;
      }
      // eslint-disable-next-line vue-scoped-css/no-unused-selector
      .el-link.el-link--primary {
        color: #155bd4;
      }
    }
  }
}
</style>
